<template>
	<div class="read-home">
		<div class="banner-cont">
			<div class="news-banner" style='text-align:center'>
				<div class="swiper-wrapper">
					<!-- <div class="banner-item swiper-slide" v-for="item in banners">
						<img :src="item.imageUrl" alt="">
					</div> -->
					<div class="banner-item swiper-slide" v-for="item in banners" style="width: 100%;height: 600px;">
						<el-image fit="contain" :src="item.imageUrl" style="width: 100%;height: 100%;"></el-image>
						<!-- <img :src="item.imageUrl" alt=""> -->
					</div>
				</div>
			</div>
		</div>
		<div class="block">
			<cmp-subTitle align="center" :hasIcon="false" title="培训讲座" :shouMore="true"
				@getmore="goPage('/ReadLesson?id=2485')"></cmp-subTitle>
			<div class="block-cont" v-if="trains && trains.length != 0">
				<div class="lesson-item" v-for="item in trains" @click="goPage('/VideoIntro', {lessonId: item.lessonId})">
					<div class="lesson-img">
						<div class="lesson-tags">
							<div class="lesson-tag lesson-tag-search">信息检索</div>
							<div class="lesson-tag lesson-type-cost">公益</div>
						</div>
						<el-image style="width: 100%; height: 100%" :src="item.logoUrl" fit="cover">
							<div slot="error" class="image-slot">
								<img src="../assets/img/no_img.png" alt="" />
							</div>
						</el-image>
					</div>
					<div class="lesson-cont">
						<div class="lesson-title">{{item.lessonName}}</div>
						<div class="lesson-initro">
							<div class="lesson-types">
								<div class="types-item">实战</div>
								<div class="types-item">中级</div>
								<div class="types-item">
									<i class="el-icon-user-solid"></i>
									<span>{{item.likeNum}}</span>
								</div>
							</div>
							<div class="lesson-star">
								<el-rate></el-rate>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="no-data" v-else>
				<el-empty description="暂无课程"></el-empty>
			</div>
		</div>
		<div class="block">
			<cmp-subTitle align="center" :hasIcon="false" title="学习视频" :shouMore="true"
				@getmore="goPage('/ReadLesson?id=2484')"></cmp-subTitle>
			<div class="block-cont" v-if="lessons && lessons.length != 0">
				<div class="lesson-item" v-for="item in lessons" @click="goPage('/VideoIntro', {lessonId: item.lessonId})">
					<div class="lesson-img">
						<div class="lesson-tags">
							<div class="lesson-tag lesson-tag-search">信息检索</div>
							<div class="lesson-tag lesson-type-cost">公益</div>
						</div>
						<el-image style="width: 100%; height: 100%" :src="item.logoUrl" fit="cover">
							<div slot="error" class="image-slot">
								<img src="../assets/img/no_img.png" alt="" />
							</div>
						</el-image>
					</div>
					<div class="lesson-cont">
						<div class="lesson-title">{{item.lessonName}}</div>
						<div class="lesson-initro">
							<div class="lesson-types">
								<div class="types-item">实战</div>
								<div class="types-item">中级</div>
								<div class="types-item">
									<i class="el-icon-user-solid"></i>
									<span>{{item.likeNum}}</span>
								</div>
							</div>
							<div class="lesson-star">
								<el-rate></el-rate>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="no-data" v-else>
				<el-empty description="暂无课程"></el-empty>
			</div>
		</div>
		<div class="block">
			<cmp-subTitle align="center" :hasIcon="false" title="直播课程" :shouMore="true"
				@getmore="goPage('/ReadLesson?id=2483')"></cmp-subTitle>
			<div class="block-cont" v-if="onlines && onlines.length != 0">
				<div class="lesson-item" v-for="item in onlines" @click="goPage('/VideoIntro', {lessonId: item.lessonId})">
					<div class="lesson-img">
						<div class="lesson-tags">
							<div class="lesson-tag lesson-tag-search">信息检索</div>
							<div class="lesson-tag lesson-type-cost">公益</div>
						</div>
						<el-image style="width: 100%; height: 100%" :src="item.logoUrl" fit="cover">
							<div slot="error" class="image-slot">
								<img src="../assets/img/no_img.png" alt="" />
							</div>
						</el-image>
					</div>
					<div class="lesson-cont">
						<div class="lesson-title">{{item.lessonName}}</div>
						<div class="lesson-initro">
							<div class="lesson-types">
								<div class="types-item">实战</div>
								<div class="types-item">中级</div>
								<div class="types-item">
									<i class="el-icon-user-solid"></i>
									<span>{{item.likeNum}}</span>
								</div>
							</div>
							<div class="lesson-star">
								<el-rate></el-rate>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="no-data" v-else>
				<el-empty description="暂无课程"></el-empty>
			</div>
		</div>
		<div class="block">
			<cmp-subTitle align="center" :hasIcon="false" title="模拟训练" :shouMore="true"
				@getmore="goPage('/Member')"></cmp-subTitle>
			<div class="block-cont imitate-nav">
				<div class="imitate-nav-item">
					<div class="nav-title">
						<span>考点练习</span>
						<div class="nav-btn" @click="points">进入</div>
					</div>
					<div class="nav-intro">根据题库提供的考点进行逐一练习</div>
				</div>
				<div class="imitate-nav-item">
					<div class="nav-title">
						<span>自由组卷</span>
						<div class="nav-btn" @click="free">进入</div>
					</div>
					<div class="nav-intro">从总体题库中，根据设置的单选多选数量随机</div>
				</div>
				<div class="imitate-nav-item">
					<div class="nav-title">
						<span>仿真测验</span>
						<div class="nav-btn">进入</div>
					</div>
					<div class="nav-intro">根据大赛的试卷要求进行抽取试题组卷</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getTopLessonApi,
		getGoodteacherApi,
		getLessonListApi,
		getBannerApi
	} from '@/api/Lesson'
	import cmpSubTitle from '@/components/cmp-subTitle'
	import Swiper from 'swiper'
	export default {
		data() {
			return {
				bannerSwiper: null,
				banners: [],
				lessons: [],
				onlines: [],
				trains: [],
				LearningVideos: [],
				teacherList: []
			}
		},
		created() {
			this.getBanner()
			this.getLearning()
			this.getOnLine()
			this.getTrain()
			// this.getLesson()
			// this.getLearningVideo()
			// this.getTeacher()
		},
		methods: {
			getBanner() {
				getBannerApi({
					menuid: 2497,
				}).then(res => {
					this.banners = res.data
					this.$nextTick(() => {
						this.bannerSwiper = new Swiper(".news-banner", {
							autoHeight: true,
							watchSlidesProgress: true,
							slidesPerView: 'auto',
							loop: true,
							autoplay: true,
						});
					})
				})
			},
			getLearning() {
				getLessonListApi({
					menuid: 2484,
					pageNum: 1,
					pageSize: 10
				}).then(res => {
					this.lessons = res.rows
				})
			},
			getOnLine() {
				getLessonListApi({
					menuid: 2483,
					pageNum: 1,
					pageSize: 10
				}).then(res => {
					this.onlines = res.rows
				})
			},
			getTrain() {
				getLessonListApi({
					menuid: 2485,
					pageNum: 1,
					pageSize: 10
				}).then(res => {
					this.trains = res.rows
				})
			},
			getTeacher() {
				getGoodteacherApi().then(res => {
					this.teacherList = res.data
					this.$nextTick(() => {
						this.initTeacherSwiper()
					})
				})
			},
			getLesson() {
				getTopLessonApi().then(res => {
					this.lessons = res.data
				})
			},
			getLearningVideo() {
				getTopLessonApi().then(res => {
					this.LearningVideos = res.data
				})
			},
			initTeacherSwiper() {
				new Swiper('.teacher-list', {
					watchSlidesProgress: true,
					slidesPerView: 'auto',
					centeredSlides: true,
					spaceBetween: 30,
					loop: true,
					loopedSlides: 5,
					autoplay: true,
				})
			},
			free() {
				this.selectDirShow = true
				this.imitateType = 3
			},
			points() {
				this.selectDirShow = true
				this.imitateType = 2
			},
			goPage(path, query) {
				this.$router.push({
					path: path,
					query: query
				})
			}
		},
		components: {
			cmpSubTitle
		}
	}
</script>

<style lang="less">
	@contWidth: 1280px;

	.read-home {
		// background-image: url(../assets/img/index_img_newsbg2.png), url(../assets/img/index_img_newsBg1.png), url(../assets/img/logo_img_bg.png);
		// background-repeat: no-repeat, no-repeat, repeat-y;
		// background-size: 4.8rem 6.79rem, 6.99rem 6.74rem, 100%;
		// background-position: left 27.16rem, right 16.7rem, left top;


		.banner {
			width: @contWidth;
			height: 100%;
			margin: 0 auto;
			position: relative;
		}

		.news-banner {
			overflow: hidden;
			max-width: 1600px;
			margin: 0 auto;
			position: relative;
		}

		// .banner-item {
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	z-index: 99;
		// 	width: 100%;
		// 	height: 100%;
		// 	display: flex;
		// 	justify-content: space-between;
		// }

		.block {
			width: @contWidth;
			margin: 30px auto;
			background-color: #f5f5f5;
			padding: 20px;
		}

		.block-title {
			padding: 34px 0 50px;
			display: flex;
			align-items: center;
			position: relative;
			width: 100%;
		}

		.title-center {
			justify-content: center;
		}

		.title-icon {
			width: 30px;
			height: 30px;
			margin: 0 13px;
			background: url(../assets/img/home_title_icon.png)no-repeat;
			background-size: 100% 100%;
		}

		.title-name {
			font-size: 20px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #000000;
			line-height: 27px;
		}

		.getMore {
			position: absolute;
			top: 50%;
			right: 20px;
			transform: translateY(-50%);
			cursor: pointer;
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #858585;
		}

		.block-cont {
			display: flex;
			flex-wrap: wrap;
		}

		.lesson-item {
			width: 234px;
			cursor: pointer;

			&:not(:nth-of-type(5n)) {
				margin-right: 15px;
			}

		}

		.lesson-img {
			position: relative;
			height: 145px;
			border-radius: 6px;
			overflow: hidden;
		}

		.lesson-tags {
			position: absolute;
			z-index: 99;
			top: 9px;
			left: 0;
			width: 100%;
			padding: 0 6px;
			display: flex;
			justify-content: flex-end;
		}

		.lesson-tag {
			padding: 2px 3px;
			margin: 0 2px;
			font-size: 9px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
		}

		.lesson-tag-search {
			background: #C8C8C8;
			color: #000;
		}

		.lesson-type-cost {
			color: #E02020;
			background: #FFA9A9;
		}

		.lesson-cont {
			padding: 13px 8px;
		}

		.lesson-title {
			width: 100%;
			font-size: 13px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
			line-height: 18px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			margin-bottom: 12px;
		}

		.lesson-initro {
			display: flex;
			justify-content: space-between;
		}

		.lesson-types {
			display: flex;
			align-items: center;
		}

		.types-item {
			margin-right: 12px;
			display: flex;
			align-items: center;
			font-size: 11px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #999999;
		}

		.el-rate__icon {
			margin-right: 0px;
		}

		.teacher-cont {
			width: @contWidth;
			margin: 0 auto;
		}

		.teacher-list {
			display: flex;
			padding-top: 76px;
			justify-content: space-between;
		}

		.teacher-item {
			position: relative;
			width: 236px;
			height: 251px;
			background: #FFFFFF;
			border-radius: 5px;
			padding-top: 64px;
		}

		.teacher-avanar {
			width: 84px;
			height: 84px;
			border-radius: 84px;
			overflow: hidden;
			position: absolute;
			top: -42px;
			left: 50%;
			transform: translateX(-50%);
			background-color: #fff;
			border: 2px solid #fff;
			box-shadow: 0px 6px 10px 0px rgba(117, 53, 255, 0.2);
		}

		.teacher-name {
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
			line-height: 24px;
			text-align: center;
		}

		.teacher-job {
			font-size: 12px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #858585;
			line-height: 20px;
			text-align: center;
			margin-bottom: 44px;
		}

		.teacher-intro {
			padding: 0 25px;
			font-size: 12px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #858585;
			line-height: 17px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}

		.image-slot {
			width: 100%;
			height: 100%;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.imitate-nav {
			display: flex;
			padding-top: 17px;
		}

		.imitate-nav-item {
			flex: 1;
			border-radius: 6px;
			overflow: hidden;
			height: 116px;
			padding: 10px 20px;

			&:not(:last-child) {
				margin-right: 20px
			}

			&:nth-of-type(1) {
				background: #D8D8D8 linear-gradient(180deg, #7535FF 0%, #BA7DFF 100%);

			}

			&:nth-of-type(2) {
				background: linear-gradient(180deg, #4162FF 0%, #35CCFF 100%);
			}

			&:nth-of-type(3) {
				background: #D8D8D8 linear-gradient(180deg, #09B693 0%, #47FFC9 100%);
			}
		}

		.nav-title {
			margin-bottom: 11px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 18px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.nav-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 58px;
			height: 33px;
			background: #FE7C3E;
			border-radius: 4px;
			font-size: 15px;
			cursor: pointer;
		}

		.nav-intro {
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
		}

		.test-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30px 0;
			border-bottom: 1px solid rgba(151, 151, 151, 0.2);
		}

		.test-name {
			font-size: 18px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-bottom: 22px;
		}

		.test-time {
			display: flex;
			align-items: center;
			font-size: 12px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #666666;
			line-height: 17px;
		}

		.time-text {
			margin-right: 68px;
		}

		.time-tag {
			display: flex;
			align-items: center;
			margin-left: 18px;
		}

		.tag-icon {
			width: 16px;
			height: 16px;
			margin-right: 4px;
		}

		.test-btn {
			width: 89px;
			height: 34px;
			background: #2360FE;
			border-radius: 17px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #FFFFFF;
			cursor: pointer;
		}

		.page-cont {
			padding: 77px 0 74px;
			display: flex;
			justify-content: center;
		}

		.el-pagination.is-background .el-pager li:not(.disabled).active {
			background-color: #2360FE;
		}

		.el-tag {
			margin: 0 10px;
		}
	}
</style>